<!DOCTYPE html>
<html style="height: 100%">

<head>
    <meta charset="utf-8">
</head>

<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>

    <script src="library/jquery/jquery-3.7.1.min.js"></script>
    <script src="library/layui/layui.js"></script>
    <script src="library/moment/moment.js"></script>
    <script src="library/echart/echarts.min.js"></script>
    <script type="text/javascript">
        const dom = document.getElementById("container")
        var chart = echarts.init(dom)

        const data = []

        const option = {
            // 标题
            title: { // https://echarts.apache.org/zh/option.html#title
                text: "动态数据 + 时间坐标轴（Dynamic Data & Time Axis）",
                link: "https://echarts.apache.org/examples/zh/editor.html?c=dynamic-data2",
                left: 'center' // https://echarts.apache.org/zh/option.html#title.left
            },
            xAxis: {
                type: "time",
                splitLine: {
                    show: true
                },
                axisLabel: {
                    formatter: '{MM}-{dd} {HH}:{mm}:{ss}',
                    show: true,
                    showMinLabel: true,
                    showMaxLabel: true,
                    width: 60,
                    overflow: 'break'
                }
            },

            dataZoom: [{
                type: 'slider',
                realtime: true,
            }],
            yAxis: {
                type: "value",
                splitLine: {
                    show: true
                }
            },
            // 提示框
            tooltip: { // https://echarts.apache.org/zh/option.html#tooltip
                show: true,
                /*
                trigger: "axis", // https://echarts.apache.org/zh/option.html#tooltip.trigger
                formatter: function(params) { // https://echarts.apache.org/zh/option.html#tooltip.formatter
                    // console.log(params)
                    param = params[0]
                    const date = new Date(param.value[0])
                    const formatedDate = `${date.getFullYear()}.${date.getMonth() + 1}.${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}.${date.getMilliseconds()}`
                    return `<div>时间：${formatedDate}</div>` + `<div>数据：${param.value[1]}</div>`
                },
                axisPointer: { // https://echarts.apache.org/zh/option.html#tooltip.axisPointer
                    animation: false
                }*/
            },
            // 工具栏
            toolbox: { // https://echarts.apache.org/zh/option.html#toolbox
                feature: { // https://echarts.apache.org/zh/option.html#toolbox.feature
                    saveAsImage: {}
                }
            },
            series: [{
                type: "line",
                name: "",
                showSymbol: true,
                data: data
            }]
        }

        let value = 10
        function randomData() {
            const now = new Date()

            value = value + Math.random() * 1 // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random

            const obj = {
                name: now.toString(),
                value: [
                    now, Math.round(value)
                ]
            }

            return obj
        }
        var datazoom = false;
        // 每一秒添加一个数据
        window.setInterval(function () {
            const obj = randomData()
            data.push(obj)
            var option = {
                series: [{
                    data: data
                }]
            }
            if (data.length > 60 && datazoom == false) {
                datazoom = true;
                option['dataZoom'] = [{
                    type: 'slider',
                    realtime: true,
                    start: 80,
                    end: 100
                }];
            }
            chart.setOption(option);
        }, 1000);


        if (option && typeof option === "object") {
            chart.setOption(option)
        }
    </script>
</body>

</html>